<template>
  <div class="todolist">
    <!-- 操作栏 -->
    <el-row type="flex" class="todolist-header" justify="end"/>

    <div class="board">
      <Kanban :key="1" :list="list1" :options="options" :allow-add="false" class="kanban todo" header-text="Todo"/>
      <Kanban :key="2" :list="list2" :options="options" :allow-add="true" class="kanban working" header-text="Working"/>
      <Kanban :key="3" :list="list3" :options="options" :allow-add="true" class="kanban done" header-text="Done"/>
    </div>
  </div>
</template>

<style lang="scss">
.todolist{
  &-header{
    padding: 30px 0;
    background-color: #f9fafc;
    margin-bottom: 15px;
  }
  .board {
    width: 1000px;
    margin-left: 20px;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: flex-start;
  }
}
.kanban {
  &.todo {
    .board-column-header {
      background: #4A9FF9;
    }
  }
  &.working {
    .board-column-header {
      background: #f9944a;
    }
  }
  &.done {
    .board-column-header {
      background: #2ac06d;
    }
  }
}
</style>

<script>
import Kanban from '@/components/Kanban'

export default {
  name: 'DragKanbanDemo',
  components: {
    Kanban
  },
  data() {
    return {
      options: {
        group: 'mission'
      },
      list1: [
        { name: 'Mission', id: 1 },
        { name: 'Mission', id: 2 },
        { name: 'Mission', id: 3 },
        { name: 'Mission', id: 4 },
        { name: 'forTest' }
      ],
      list2: [
        { name: 'Mission', id: 5 },
        { name: 'Mission', id: 6 },
        { name: 'Mission', id: 7 }
      ],
      list3: [
        { name: 'Mission', id: 8 },
        { name: 'Mission', id: 9 },
        { name: 'Mission', id: 10 }
      ]
    }
  }
}
</script>
